<template>
  <div class="show-msg">
    
    <div v-for="(item, index) in message">
      <div class="msg-item" >
        <img
          :src="item.avatar"
          alt=""
          
        />
        <div>
          <div class="name">
            {{ item.nickname }}
          </div>
          <div
            ref="msg"
            id="msg"
            class="msg"
            :class="{mymsg:item.send_id===_id}"
            v-html="EmojiHandle(item.msg)"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    message: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      emojiUrl: "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/",
      list: [
        "微笑",
        "撇嘴",
        "色",
        "发呆",
        "得意",
        "流泪",
        "害羞",
        "闭嘴",
        "睡",
        "大哭",
        "尴尬",
        "发怒",
        "调皮",
        "呲牙",
        "惊讶",
        "难过",
        "酷",
        "冷汗",
        "抓狂",
        "吐",
        "偷笑",
        "可爱",
        "白眼",
        "傲慢",
        "饥饿",
        "困",
        "惊恐",
        "流汗",
        "憨笑",
        "大兵",
        "奋斗",
        "咒骂",
        "疑问",
        "嘘",
        "晕",
        "折磨",
        "衰",
        "骷髅",
        "敲打",
        "再见",
        "擦汗",
        "抠鼻",
        "鼓掌",
        "糗大了",
        "坏笑",
        "左哼哼",
        "右哼哼",
        "哈欠",
        "鄙视",
        "委屈",
        "快哭了",
        "阴险",
        "亲亲",
        "吓",
        "可怜",
        "菜刀",
        "西瓜",
        "啤酒",
        "篮球",
        "乒乓",
        "咖啡",
        "饭",
        "猪头",
        "玫瑰",
        "凋谢",
        "示爱",
        "爱心",
        "心碎",
        "蛋糕",
        "闪电",
        "炸弹",
        "刀",
        "足球",
        "瓢虫",
        "便便",
        "月亮",
        "太阳",
        "礼物",
        "拥抱",
        "强",
        "弱",
        "握手",
        "胜利",
        "抱拳",
        "勾引",
        "拳头",
        "差劲",
        "爱你",
        "NO",
        "OK",
        "爱情",
        "飞吻",
        "跳跳",
        "发抖",
        "怄火",
        "转圈",
        "磕头",
        "回头",
        "跳绳",
        "挥手",
        "激动",
        "街舞",
        "献吻",
        "左太极",
        "右太极"
      ]
    };
  },
  computed: {
    _id() {
      return (
        this.$store.getters.user._id ||
        JSON.parse(localStorage.getItem("userInfo"))._id
      );
    }
  },
  mounted() {},
  activated() {},
  methods: {
    //表情处理函数
    EmojiHandle(msg) {
      let reg = /\[(.*?)\]/g
      return msg ? msg.replace(reg,`<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/1.gif" >`):msg
    },
    //查找表情在数组中的索引
    findall(x,y){
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.show-msg {
  overflow: hidden;
}

.show-msg {
  /* height: 100vh; */
  /* padding: 10px 5px 0 5px; */
  margin-top: 60px;
  margin-bottom: 49px;
}
.msg-item {
  /* transform-style: preserve-3d; */
  /* transform: rotateY(180deg); */
  padding: 0 10px;
  display: flex;
  margin-top: 10px;
}
.msg-item img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
.msg-item .name {
  font-size: 14px;
  margin-left: 10px;
}
.msg-item .msg {
  border-radius: 5px;
  text-align: left;
  /* white-space: normal; */
  word-break: break-all;
  word-wrap: break-word;
  margin-top: 5px;
  margin-left: 5px;
  padding: 10px;
  border: 0.5px solid #888;
}
.mymsg{
  background-color: rgb(115, 233, 115);
}
.transform {
  text-align: right;
  transform: rotateY(180deg);
}
</style>
